<!--
 * @version: v1.0
 * @Author: ItLy
 * @Date: 2021-03-03 21:57:45
 * @LastEditors: ItLy
 * @LastEditTime: 2021-03-03 22:34:44
-->
<template>
  <div class="slider-user bgWhite">
    <div class="slider-user_avater-box">
      <nuxt-link to="/about" title="刘洋个人博客">
        <img class="img" alt="itliuyang-头像" src="@/assets/images/head.jpg" />
      </nuxt-link>
    </div>
    <div class="slider-user_detail">
      <h2 class="name">{{ name }}</h2>
      <h3 class="desc">{{ desc }}</h3>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
@Component
export default class HelloWorld extends Vue {
  desc: String = "越努力越幸运";
  name: String = "itliuyang";
  //   @Prop({
  //     // default: "123123",
  //   })
  //   @Emit('bindSend') send(msg: string){};
  // methods
  //   toFather(){
  //     this.send('HelloWord 来消息');;
  //   }
}
</script>
<style lang="scss" scoped>
/* 个人介绍开始 */
.slider-user {
  height: 280px;
  &_avater-box {
    height: 100px;
    background-color: #ccc;
    position: relative;
    padding-top: 60px;
    background-image: url(../assets/images/headbg.jpg);
    background-size: cover;
    background-position: center;

    img {
      width: 80px;
      height: 80px;
      margin: 0 auto;
      border-radius: 50%;
      display: block;
      border: 3px solid #fff;
      object-fit: cover;
      transition: all 0.2s;
      cursor: pointer;
      &:hover {
        transform: rotate(-30deg);
      }
    }
  }
  &_detail {
    margin-top: 60px;
    text-align: center;
  }
}

/* 个人介绍结束 */
</style>
